<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 导入jquery核心类库 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<!-- 导入easyui类库 -->
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/js/easyui/ext/portal.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/css/default.css">	
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.portal.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/easyui/ext/jquery.cookie.js"></script>
<script
	src="${pageContext.request.contextPath }/js/easyui/locale/easyui-lang-zh_CN.js"
	type="text/javascript"></script>

</head>
<body class="easyui-layout" style="visibility:hidden;">
	<div region="north" style="height:31px;overflow:hidden;" split="false" border="false" >
		<div class="datagrid-toolbar">
			<a id="save" icon="icon-save" href="#" class="easyui-linkbutton" plain="true" >保存</a>
		</div>
	</div>
	<script type="text/javascript">
	$(function(){
		$('#save').click(function(){
			//有效性验证
			if(!$('#userEditForm').form('validate')){
				$.messager.alert('提示','表单还未填写完成!');
				return ;
			}
		
			$.post("${pageContext.request.contextPath }/admin/edituser",$("#userEditForm").serialize(), function(data){
				if(data.status == 200){
					 //刷新当前页面.
					 $.messager.alert('提示', '用户修改成功!', 'info', function() {
							$("#userEditWindow").window('close');
							$("#userList").datagrid("reload");
					});
				}
			});
		});
	});
	
</script>	
    <div region="center" style="overflow:auto;padding:5px;" border="false">
       <form id="userEditForm" method="post">
           <table class="table-edit"  width="70%" align="left">
           		<input type="hidden" name="id" />
           		<tr class="title"><td colspan="4">基本信息</td></tr>
	           	<tr>
	           		<td>用户名:</td><td><input type="text" name="username" id="username" class="easyui-validatebox" required="true" /></td>
					<td>口令:</td><td><input type="password" name="password" id="password" class="easyui-validatebox" required="true" /></td>
				</tr>
				<tr>
					<td>真实姓名:</td><td><input type="text" name="realname" id="realname" class="easyui-validatebox" required="true" /></td>
	           	<td>性别:</td>
	           		<td>
		           		<select name="gender" id="gender" class="easyui-combobox" required="true" style="width: 150px;">
		           			<option value="">请选择</option>
		           			<option value="1">男</option>
		           			<option value="0">女</option>
		           		</select>
	           		</td>
				</tr>
				<tr>
					<td>公司:</td><td><input type="text" name="company" id="company" /></td>
	           		<td>部门:</td><td><input type="text" name="department" id="department" /></td>
				</tr>
				<tr>
					<td>职位:</td><td><input type=text name="position" id="position"  /></td>
				</tr>
				<tr class="title"><td colspan="4">其他信息</td></tr>
				<tr>
					<td>联系电话</td>
					<td>
						<input type="text" name="telephone" id="telephone" class="easyui-validatebox" required="true" />
					</td>
					<td>电子邮件:</td><td><input type="text" name="email" id="email"/></td>
				</tr>
	           	<tr><td>备注:</td><td colspan="3"><textarea name="remark" style="width:80%"></textarea></td></tr>
	           	<tr><td>选择角色:</td>
		           	<td colspan="3" id="roleTD">
		           		<script type="text/javascript">
		           			$(function(){
		           				//发送ajax请求，获取所有的角色数据，返回json，在页面中动态构造到checkbox中
		           				var url = "${pageContext.request.contextPath}/admin/getallRoles";
		           				$.post(url,{},function(data){
		           					//解析json数据，构造checkbox
		           					for(var i=0;i<data.length;i++){
		           						var id = data[i].id;
		           						var name = data[i].name;
		           						$("#roleTD").append('<input type="checkbox" value="'+id+'" name="roleIds">'+name);
		           					}
		           				});
		           			});
		           		</script>
		           		
		           	</td>
		       </tr>
           </table>
       </form>
	</div>
</body>
</html>